<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft"> </van-nav-bar> -->
            <!--滚动内容区域-->
            <scroll-view :refresher-enabled="false" class="scroll-content" @scrolltolower="scrolltolower"
                @scroll="scrollPage" @refresherrefresh="refresherpulling" :refresher-triggered="isrefresher" scroll-y
                :lower-threshold="110"  show-scrollbar="false">
                <!-- <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading> -->
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top" :class="{ fixed_top: scrolling }">
                    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar">
                    </van-nav-bar>
                    <!-- <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view> -->
                </view>
                <view class="scroll-card">
                    <!-- 背景图轮播哦 -->
                    <view class="sur_box_bg">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/wholeHouseClean_bg.png" alt="">
                    </view>
                    <view class="card_top">
                        <view class="card_top_content">
                            <view class="service_item" v-for="(item,index) in serviceItems" :key="index" :id="item.id" @tap="toGoodsDetail(item,index)">
                                <view class="service_icon"> <img :src="item.iconUrl" alt="" /> </view>
                                <view class="service_text">{{item.name}}</view>
                            </view>
                            <!-- <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/kaihuang_clean.png"
                                        alt="" /> </view>
                                <view class="service_text">开荒保洁</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/daily_clean.png"
                                        alt="" /> </view>
                                <view class="service_text">日常保洁</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/depth_clean.png"
                                        alt="" /> </view>
                                <view class="service_text">深度保洁</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/glasses_clean.png"
                                        alt="" /> </view>
                                <view class="service_text">擦玻璃</view>
                            </view> -->
                        </view>
                        <view class="card_top_other">
                            <view class="other_padding">
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">三方对比</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">极速响应</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">安心保证</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">售后无忧</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="card_banner">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/banner_clean.png"
                            alt="">
                    </view>
                    <view class="card_three_banner middle">
                        <view class="card_middle_bottom">
                            <view class="middle_title">限时特惠</view>
                            <!-- 四张小图  服务对应的商品 -->
                            <view class="card_middle_banner">
                                <view class="bannerItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/wholeHouseTLBanner.png" alt="" mode="widthFix">
                                </view>
                                <view class="bannerItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/wholeHouseTRBanner.png" alt="" mode="widthFix">
                                </view>
                                <view class="bannerItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/wholeHouseBLBanner.png" alt="" mode="widthFix">
                                </view>
                                <view class="bannerItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/wholeHouseBRBanner.png" alt="" mode="widthFix">
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 流程 -->
                    <view class="card_process">
                        <view class="card_process_title">服务流程</view>
                        <view class="card_process_content">
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/reserve.png"
                                        alt="" /> </view>
                                <view class="process_text">预约成功</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                        alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/serve.png"
                                        alt="" /> </view>
                                <view class="process_text">上门服务</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                        alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/finish.png"
                                        alt="" /> </view>
                                <view class="process_text">完成服务</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                        alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/judge.png"
                                        alt="" /> </view>
                                <view class="process_text">服务评价</view>
                            </view>
                        </view>

                    </view>
                    <view class="card_service_list">
                        <view class="goodsListBox">
                            <view class="serviceGoodsList" v-for="(itemL, indexL) in serviceGoodsList" :id="indexL"
                                :key="indexL" @click="toGoodsDetail(itemL, indexL)">
                                <view class="serviceGoods_img"> <img :src="itemL.imgurl" alt="" mode="widthFix"> </view>
                                <view class="serviceGoods_title pl15">{{ itemL.title }}</view>
                                <view class="serviceGoods_subtitle pl15">{{ itemL.detail }}</view>
                                <view class="serviceGoods_price pl15">{{ itemL.price }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import pageIds from '@/assets/pageId.json';

export default {
    components: {

    },
    data () {
        return {
            name: '',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            isrefresher: false,
            title:'全屋清扫',
            serviceGoodsList: [ //热卖商品
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/serviceGoodsPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/takeCareOldPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/serviceGoodsPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/takeCareOldPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              }
            ],
            serviceItems: [
                {
                    name: '开荒保洁',
                    iconUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/kaihuang_clean.png'
                },
                {
                    name: '日常保洁',
                    iconUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/daily_clean.png'
                },
                {
                    name: '深度保洁',
                    iconUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/depth_clean.png'
                },
                {
                    name: '擦玻璃',
                    iconUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/glasses_clean.png'
                }
            ],
        }
    },
    onLoad (options) {
        console.log(options, 'options.name')
    },
    onReady () {
        this.onRefresherMethod()
        this.topStyleWhite()
        // 定义服务名称到英文名称的映射
        const nameMapping = {
            '开荒保洁': 'kaihuang_clean',
            '日常保洁': 'daily_clean',
            '深度保洁': 'depth_clean',
            '擦玻璃': 'glasses_clean'
        }
        this.serviceItems.forEach(item=>{
            const serviceName = nameMapping[item.name]
            const page = pageIds.wholeHouseClean.find(page=> page.serviceName === serviceName)
            if(page){
                item.id = page.id;
            }else{
                item.id='未找到'
            }
        })
    },
    methods: {
        refresherpulling () {
            if (!this.isrefresher) {
                this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
                this.onRefresherMethod()
            }
        },
        onRefresherMethod() {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            this.loadingIsShow = false
            // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            this.time = setTimeout(e => {
                this.isrefresher = false
            }, 300)
        },
        scrolltolower () { },
        scrollPage (e) {
            // this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
            console.log('顶部滚动距离', e.detail.scrollTop)
            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
        },
        onClickLeft () {
            uni.navigateBack()
        },
        topStyleWhite () {
            // 手机顶部
            // eslint-disable-next-line no-undef
            wx.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: 'rgba(255, 255, 255, 0)'
            })
        },
        toGoodsDetail(item, index){
            console.log(item)
        },
        // // tanchuang
        // showJoinPopup(val){
        //     this.JOpopup=true
        //     this.popupBiaoshi=val
        // },
        // closeJoinPopup(val){
        //     this.JOpopup=true
        //     this.popupBiaoshi=val
        
        // },
        // closeJOPopup(){
        //     this.JOpopup=false
        // }

    }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	overflow: hidden;
    z-index: -2;
	background-size: 100%;
	background-color: #F9F9F9;
}
.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: #F9F9F9;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}
::v-deep .van-nav-bar {
    background-color: transparent;
}

::v-deep .van-nav-bar__arrow {
    color: #111111 !important;
}

::v-deep #navBar .van-icon {
    color: #111111 !important;
}


.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll-content-box{
    flex: 1;
    height: 1px;
}

.backIcon {
    margin-top: 8px;
}

.scroll-card {
    // padding: 105px 12px 48px;
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: -1;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}
// 背景图部分
.sur_box_bg {
	position: relative;
	// top: 0px;
	width: 100%;
	height: 440rpx;

	img {
		width: 100%;
		height: 440rpx;
	}

    .pageTopTitleContent{
        position: absolute;
        top: 221rpx;
        right: 69rpx;
        .pageTopTitle{
            font-size: 48rpx;
            text-align: right;
            color: #4E78D1;
            line-height: 48rpx;
        }
        .pageTopSubtitle{
            margin-top: 22rpx;
            border-radius: 15px;
            background: #4e78d1;
            font-size: 20rpx;
            line-height: 20rpx;
            text-align: right;
            color: #FFFFFF;
            padding: 5rpx 14rpx;
        }
    }
}

.card_top{
    border-radius: 12px;
    background: #ffffff;
    margin-left: 24rpx;
    margin-right: 24rpx;
    // margin-top: 394rpx;
    margin-top: -45rpx;
    z-index: 1;

}
.card_top_content {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 32rpx 0rpx;
    margin: 0rpx 24rpx;
    border-bottom: 1px solid #F0F0F0;

    .service_item {
        flex: auto;

        .service_icon {
            img {
                width: 60rpx;
                height: 60rpx;
            }
        }

        .service_text {
            font-weight: 400;
            line-height: 28rpx;
            font-size: 28rpx;
            text-align: center;
            color: #333333;
        }
    }
}


.card_top_other{
    border-radius:0 0 12px 12px;
    background: linear-gradient( #FFFFFF, #DCF2FA);

    .other_padding{
        padding: 11px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}
.other_item{
    flex: 1;
    display: flex;
    align-items: center;
    line-height: 13px;
    .other_icon{
        margin-right: 5px;
        line-height: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        img{
            width: 9px;
            height: 9px;
        }
    }
    .other_text{
        font-weight: 400;
        font-size: 26rpx;
        text-align: left;
        color: #333333;
        line-height:26rpx;
    }
}


.card_banner{
    margin-top: 26rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    height: 196rpx;
    img{
        width: 100%;
        height:196rpx;
    }
}
// 三张图的banner
.card_three_banner{
    margin-top: 24rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
}

// 三张banner
.middle {
    .middle_title{
        font-size: 36rpx;
        text-align: left;
        color: #111111;
        line-height: 36rpx;
        font-weight: bolder;
    }
    .card_middle_bottom{
        padding: 24rpx 24rpx 0rpx 24rpx;
        background-color: #ffffff;
        border-radius: 25rpx;
        
        .card_middle_banner{
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 25rpx;

            .bannerItem {
                width: calc((100% - 27rpx)/2);
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-bottom: 24rpx;
        
                img {
                    width: 100%;
                    height: auto;
                }
            }
            // .bannerItem:nth-child(2n) {
            //     margin-bottom: 0;
            // }
        }
    }

}


// 服务流程
.card_process{
    margin-top:26rpx;
    background: #ffffff;
    border-radius: 12px;
    padding-left: 24rpx;
    padding-right: 24rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;

    
    .card_process_title{
        font-weight: bolder;
        font-size: 36rpx;
        line-height: 36rpx;
        text-align: left;
        color: #111111;
        padding-top:22rpx;
    }
    .card_process_content{
        padding-top: 32rpx;
        padding-bottom:38rpx;
        display: flex;
        // align-items: center;  //会影响箭头
        text-align: center;
    }
    .process_item {
        flex: 1;

        .arrow_img {
            // width: 100rpx;
            height: 100rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 24rpx;
                height: 18rpx;
            }
        }

        .process_icon {
            img {
                width: 100rpx;
                height: 100rpx;
            }
        }

        .process_text {
            margin-top: 24rpx;
            font-size: 24rpx;
            text-align: center;
            color: #000000;
            line-height: 24rpx;
        }
    }

}


.card_service_list{
    margin-top: 26rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    
}

.goodsListBox{    
    width: 100%;
    display: flex;
    justify-content: space-between;
    // justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    /* 允许Flex项目换行 */
   text-align: center;
}

.serviceGoodsList {
    width: 48%;
    // flex: 0 0 calc((100% - 24px) / 2);
    // 盒子整体 距下一个10px、
    margin-bottom: 20rpx;
    // margin-right: 20rpx;
    border-radius:12px;
    background: #ffffff;
    

.serviceGoods_img {
    // height: 170px;
    // line-height: 170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
        width: 100%;
        height: auto;
    }
}
.serviceGoods_title {
    max-width:calc(100% - 64rpx); 
    min-height: 32rpx;
    // white-space: pre-wrap;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 32rpx;
    // line-height: 32rpx;
    text-align: left;
    color: #333333;
    margin-top: 20rpx;
    margin-left: 32rpx;
    margin-right: 32rpx;
}
.serviceGoods_subtitle {
    max-width:calc(100% - 64rpx); 
    min-height: 26rpx;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 26rpx;
    // line-height: 26rpx;
    text-align: left;
    color: #666666;
    margin: 16rpx 32rpx 0rpx 32rpx;
}

.serviceGoods_price {
    font-weight:bolder;
    line-height: 32rpx;
    font-size: 32rpx;
    text-align: left;
    margin-top: 14rpx;
    margin-bottom: 20rpx;
    margin-left: 32rpx;
    color: #FF6203;
}

}

.serviceGoodsList:nth-child(2n) {
    margin-right: 0;
}


.b12{
    margin-bottom: 24rpx;
}
</style>
